<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 450px;
            margin: 200px auto;
        }
        #txt{
            width: 350px;
        }
        #pop {
            width: 350px;
            border: 1px solid red;
        }
        #pop ul {
            margin: 10px;
            padding: 0px;
            width: 200px;
            list-style-type: none;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="text" id="txt">
    <input type="button" value="搜索" id="btn">
</div>
<script>
    //        //获取以a开头的字符串
    //        var t = "abcd";
    //        //查找a在字符串t中出现的位置   如果找不到的话返回-1
    //        var index = t.indexOf("xyz")
    //        console.log(index);

    //模拟从服务器获取的数据
    var array = ["aaaa","abcdef","abbbcccdd","axxxxyyyy","aabbcc"];

    //1 给文本框注册事件
    var txt = document.getElementById("txt");

    //键盘弹起 onkeyup
    txt.onkeyup = function() {
        //获取文本框中输入的内容
        var v = this.value;
        //2 找array数组中 以文本框中的内容开头的那些内容
        var tmpArray = [];
        for(var i = 0; i<array.length; i++) {
            //判断数组中的每一个字符串是否是以v 开头的
            var item = array[i];
            if (item.indexOf(v) === 0) {
                tmpArray.push(item);
            }
        }
        var box = document.getElementById("box");
        //4 动态创建popDiv之前，先检查box中是否已经有popDiv，如果已经有了。移除
        var popDiv = document.getElementById("pop");
        //问题2 解决删除到文本框没有内容，也会弹出popDiv
        if(v.length === 0) {
            //如果文本框的内容为空，删除popDiv，并返回
            console.log(popDiv);
            //解决，如果文本框中没有内容，并且页面上没有popDiv，
            //此时获取的popDiv是null，调用removeChild会报错
            if(popDiv){
                box.removeChild(popDiv);
            }
            return;
        }
        //问题1 解决popDiv会追加
        if (popDiv) {
            box.removeChild(popDiv);
        }
        //问题3 如果没有以输入内容开头的，不生成popDiv
        if (tmpArray.length === 0) {
            return;
        }
        //3 动态创建元素
        //在内存中创建了dom对象--div
        popDiv = document.createElement("div");
        //box中追加子元素popDiv
        box.appendChild(popDiv);
        //设置div的id
        popDiv.id = "pop";

        //创建ul
        var ul = document.createElement("ul");
        popDiv.appendChild(ul);
        for(var i = 0; i < tmpArray.length; i++) {
            var item = tmpArray[i];
            //
            var li = document.createElement("li");
            ul.appendChild(li);
            setInnerText(li, item);

            //todo 鼠标高亮显示
//                li.onmouseover
        }
    }


    function setInnerText(element,content) {
        if (element.textContent) {
            element.textContent = content;
        }else{
            element.innerText = content;
        }
    }
</script>
</body>
</html>